<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="line"
	  tooltipFormat="tooltipDemo2"
      :opts="mergedOpts"
      :chartData="chartData"
      :canvasId="canvasId"
      @onInit="onChartInit"
      @onError="onChartError"
	  :ontouch="true"
    />
  </view>
</template>

<script>
export default {
  // 组件名称
  name: "LineChart",
  
  // 接收父组件传递的参数
  props: {
    // 图表唯一标识，多图表时需不同
    canvasId: {
      type: String,
      default: "lineChart" + Date.now() // 默认使用时间戳确保唯一性
    },
    // 图表数据
    data: {
      type: Object,
      default: () => ({
        categories: [],
        series: []
      })
    },
    // 图表配置项，会与默认配置合并
    options: {
      type: Object,
      default: () => ({})
    },
    // 图表高度
    height: {
      type: Number,
      default: 300
    },
    // 图表宽度
    width: {
      type: Number,
      default: null // 默认100%宽度
    }
  },
  
  data() {
    return {
      // 内部图表数据
      chartData: {},
      // 默认配置
      defaultOpts: {
        color: ["#1890FF"],
        padding: [15, 10, 0, 15],
        dataLabel: false,
        dataPointShape: true,
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
			dataPointShape:true,
			dataPointShapeType:"hollow",
			line: {
				type: "curve",
				width: 2,
				activeType: "solid",
				linearType: "custom"
			}
        }
      }
    };
  },
  
  computed: {
    // 合并默认配置和父组件传入的配置
    mergedOpts() {
      return { ...this.defaultOpts, ...this.options };
    },
    
    // 计算图表容器样式
    containerStyle() {
      const style = {
        height: `${this.height}px`,
        width: this.width ? `${this.width}px` : '100%'
      };
      return style;
    }
  },
  
  watch: {
    // 监听数据变化，实时更新图表
    data: {
      deep: true,
      handler(newVal) {
        this.chartData = JSON.parse(JSON.stringify(newVal));
      }
    },
    
    // 监听配置变化，实时更新图表
    options: {
      deep: true,
      handler() {
        // 重新初始化图表
        this.$nextTick(() => {
          this.chartData = JSON.parse(JSON.stringify(this.data));
        });
      }
    }
  },
  
  created() {
    // 初始化数据
    this.chartData = JSON.parse(JSON.stringify(this.data));
  },
  
  methods: {
    // 图表初始化回调
    onChartInit(chart) {
      // 向父组件发送初始化完成事件
      this.$emit('init', chart);
    },
    
    // 图表错误回调
    onChartError(error) {
      // 向父组件发送错误事件
      this.$emit('error', error);
    },
    
    // 提供更新数据的方法
    updateData(newData) {
      this.chartData = JSON.parse(JSON.stringify(newData));
      this.$emit('data-updated', newData);
    }
  }
};
</script>

<style scoped>
.charts-box {
  /* 基础样式，具体尺寸由computed的containerStyle控制 */
  box-sizing: border-box;
}
</style>
